<template>
	<view class="ss-m-x-20 ss-p-t-20">
		<view class="user ss-flex ss-m-b-14">
			<view class="ss-m-r-20 ss-flex">
				<image :src="sheep.$url.cdn(item.photo_url)" class="avatar"></image>
			</view>
			<view class="content">
				<view class="nickname ss-m-r-20">
					{{ item.name }}
				</view>
				<text class="content">
					商品数量：{{ item.num_sell_items }}个
				</text>
			</view>
			<!--<view class="content">
				<view @click="sheep.$router.go('/pages/index/seller', { sellerId: item.id })" class="link ss-m-r-20">
					进入卖家主页
				</view>
			</view>-->
		</view>
	</view>
</template>

<script setup>
import sheep from '@/sheep';
import {reactive} from 'vue';

const props = defineProps({
	item: {
		type: Object,
		default() {
		},
	},
});
const state = reactive({
	commentImages: [],
	chinese: '',
	view: 'source'
});

props.item.images?.forEach((i) => {
	state.commentImages.push(sheep.$url.cdn(i));
});

function onReset() {
	state.view = 'source'
}

function onTranslate() {
	if (state.chinese) {
		state.view = 'target'
		return
	}
	// 加载提示
	sheep.$helper.toast('正在翻译');
	sheep.$api.goods.translate({
		content: props.item.comments
	}).then(res => {
		state.chinese = res;
		state.view = 'target'
	})
}
</script>

<style lang="scss" scoped>

.user {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 1px 1px 50px #dadada;

	/* background-image: url("https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/140bd016097a894e33a18de250f41450b2WX20250114-221159@2x.png"); */
	background-size: 100% 100% !important;
	background-repeat: no-repeat;
	//box-shadow: 1px 1px 40px #dadada;
	.ss-flex {
		align-items: center;
	}
}
.avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.nickname {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 28.96px;
	color: rgba(0, 0, 0, 1);
	text-align: left;
	vertical-align: top;
}

.link {
	position: absolute;
	right: 20px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 26.06px;
	text-decoration-line: underline;
	color: rgba(111, 170, 247, 1);
	text-align: left;
	vertical-align: top;
}

.content {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 20.27px;
	color: rgba(0, 0, 0, 1);
	text-align: left;
	vertical-align: top;
}

.card-header {
	.line {
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
		border-radius: 3rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.des {
		font-size: 24rpx;
		color: $dark-9;
	}

	.more-btn {
		font-size: 24rpx;
		color: var(--ui-BG-Main);
	}
}
</style>
